<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Chat</title>
    <style>
        #chatOutput {
            white-space: pre-wrap;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            min-height: 200px;
        }
    </style>
</head>
<body>
<h1>Chat with AI</h1>
<button id="startChat">Start Chat</button>
<div id="chatOutput"></div>

<script>
    // document.getElementById('startChat').addEventListener('click', () => {
    //     const chatOutput = document.getElementById('chatOutput');
    //     chatOutput.innerHTML = ''; // 清空之前的输出
    //
    //     // 定义消息列表
    //     const messages = [
    //         {role: 'system', content: '你是kimi AI'},
    //         {role: 'user', content: '你是谁'}
    //     ];
    //
    //     // 发送 POST 请求，启动 SSE 连接
    //     const eventSource = new EventSource(`http://localhost:9090/api/chat/sse?messages=${encodeURIComponent(JSON.stringify(messages))}`);
    //
    //     eventSource.onmessage = (event) => {
    //         const response = event.data;
    //         const p = document.createElement('p');
    //         p.textContent = response;
    //         chatOutput.appendChild(p);
    //     };
    //
    //     eventSource.onerror = (event) => {
    //         console.error('SSE error:', event);
    //         eventSource.close();
    //     };
    // });


    document.getElementById('startChat').addEventListener('click', async () => {
        const chatOutput = document.getElementById('chatOutput');
        chatOutput.innerHTML = ''; // 清空之前的输出

        // 定义消息列表
        const messages = [
            // {role: 'system', content: '你是kimi AI'},
            {role: 'user', content: '你是谁'}
        ];

        try {
            // 发送 POST 请求
            const response = await fetch('http://localhost:19090/kimi/sse', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(messages)
            });
            // 处理流式响应
            const reader = response.body.getReader();
            const decoder = new TextDecoder();

            while (true) {
                const {done, value} = await reader.read();
                if (done) break;

                const chunk = decoder.decode(value, {stream: true});
                console.log(chunk); // 打印原始 chunk

                const events = chunk.split('\n\n').filter(event => event.trim() !== '');
                events.forEach(event => {
                    const parsedEvent = parseSSEChunk(event);
                    if (parsedEvent.data) {
                        const p = document.createElement('span');
                        p.textContent = parsedEvent.data; // 只渲染 data 字段
                        chatOutput.appendChild(p);
                    }
                });
            }
        } catch (error) {
            console.error('Fetch error:', error);
        }

        // 解析 SSE 格式的 chunk
        function parseSSEChunk(chunk) {
            const lines = chunk.split('\n'); // 按行分割
            const result = {};

            lines.forEach(line => {
                const colonIndex = line.indexOf(':'); // 找到冒号的位置
                if (colonIndex === -1) return; // 忽略无效行

                const field = line.slice(0, colonIndex).trim(); // 字段名
                const value = line.slice(colonIndex + 1).trim(); // 字段值

                if (field === 'data') {
                    result.data = value; // 提取 data 字段
                } else if (field === 'id') {
                    result.id = value; // 提取 id 字段
                } else if (field === 'event') {
                    result.event = value; // 提取 event 字段
                }
            });

            return result;
        }
    });


</script>
</body>
</html>